<template>
	<view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/loginbg.png)`, }">
		<u-navbar
            title=""
			leftIconColor="#fff"
            :autoBack="true"
			:bgColor="bgColor"
     :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
        >
        </u-navbar>
	  <view class="top">
		<view class="title">欢迎来到中远直聘</view>
		<text>安全便捷，真实有效</text>
	  </view>
	  <view class="middle">
		<view class="form-box flex">
		  <view class="name active">注册账号</view>
		  <view class="jumplogin">已有账号？<text @click="login">去登录</text></view>
		</view>
		<view class="content">
			
			<uni-forms
      ref="registerRef"
      v-model="state.formData"
      :rules="state.rules"
      validateTrigger="bind"
    >
      <uni-forms-item name="mobile" label="手机号">
        <uni-easyinput
          placeholder="请输入手机号"
          v-model="state.formData.mobile"
          type="number"
          :inputBorder="false"
        >
        
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="code" label="验证码">
        <uni-easyinput
          placeholder="请输入验证码"
          v-model="state.formData.code"
          :inputBorder="false"
          type="number"
          maxlength="4"
        >  <template v-slot:right>
            <button
              class="ss-reset-button code-btn code-btn-start"
              :disabled="state.isMobileEnd"
              :class="{ 'code-btn-end': state.isMobileEnd }"
              @tap="getSmsCode('smsRegister', state.formData.mobile)"
            >
              {{ getSmsTimer('smsRegister') }}
            </button>
          </template>
		</uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="password" label="设置密码">
        <uni-easyinput
          type="password"
          placeholder="请输入密码"
          v-model="state.formData.password"
          :inputBorder="false"
        >
        </uni-easyinput>
      </uni-forms-item>
	  <uni-forms-item name="confirmPwd" label="确认密码">
        <uni-easyinput
		  type="password"
          placeholder="请再次输入密码"
          v-model="state.formData.confirmPwd"
          :inputBorder="false"
        >
        </uni-easyinput>	
      </uni-forms-item>
	  <button class="submit" @tap="registerSubmit"> 注册 </button>
    
     <!-- <s-button @netWork="registerSubmit" :text="text"></s-button> -->
	  <!--勾选相关协议-->
	  <view class="agreement " :class="{ shake: currentProtocol }">
		  <label class="radio" @tap="onChange">
			<radio @tap.stop="onChange" :checked="agreeStatus" class="is-checked" style="transform:scale(0.6)" color="#0038F7"/>
      <view>我已阅读并遵守<text @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)">
							《{{ appInfo.user_protocol.title }}》</text>和<text @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)">
              《{{ appInfo.privacy_protocol.title }}》</text></view>
		  </label>
		</view>
    </uni-forms>
		</view>
		
	  </view>
	</view>
  </template>
  
  <script setup>
  import sheep from '@/sheep';
  import {  ref, reactive, unref,computed } from 'vue';
  import { baseUrl } from '@/sheep/config';
  import { code, mobile, password,confirmPwd } from '@/sheep/validate/form';
  import {  getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  const appInfo = computed(() => sheep.$store('app').info);
  const bgColor = ref('#fff0')
 const currentProtocol = ref(false)
  const registerRef = ref(null);
  // 数据
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    formData: {
      mobile: '', // 手机号
      code: '', // 验证码
      password: '', // 密码
	  confirmPwd:'',//确认密码
    },
    rules: {
      code,
      mobile,
      password,
	  confirmPwd
    },
  });
  // 查看协议
function onProtocol(id, title) {
		sheep.$router.go('/pages/public/richtext', {
			id,
			title,
		});
	}

   //勾选协议
   function onChange() {
	agreeStatus.value = !agreeStatus.value;
  }
// 3.短信注册
const  agreeStatus  = ref(false)
async function registerSubmit() {
    const validate = await unref(registerRef)
      .validate()
      .catch((error) => {
      });
    if (!validate) return;

    if (agreeStatus.value == false) {
      currentProtocol.value = true
	  uni.showToast({
			title: '请勾选相关协议',
			icon:"none"
		});
		return;
    }
    const { code ,res} = await sheep.$api.user.smsRegister({
		mobile: state.formData.mobile,
	    code: state.formData.code,
	   password: state.formData.password
 
    });
    if (code === 1) {
      uni.showToast({
        title: '注册成功',
        icon:"none"
      });
      sheep.$router.redirect('/pages/user/index/index')
    }
  }
const login = () =>{
  sheep.$router.back()
}
  </script>
  
  <style lang="scss">
@import '../auth/components/login.scss';
  .shake {
		animation: shake 0.05s linear 4 alternate;
	}
	@keyframes shake {
		from {
			transform: translateX(-10rpx);
		}
  }
  :deep(.u-status-bar){
    background-color: transparent !important;
  }

  :deep(.u-navbar__content){
    background-color: transparent !important;
  }
  
:deep(.u-icon__icon) {
	background:#3333336e;
	width: 64rpx;
	height: 64rpx;
	justify-content: center;
	border-radius: 50%;
}
  </style>